<template>
    <div id="download" class="align-center" ref="dowload">
        <!-- <div v-if="!loadingLessonSet.some(item=>item.id === lessonId)" class="align-center"> -->
        <div class="align-center">
            <div class="progress-con" @click="handledownload">
                <!-- <el-progress class="down-btn" :stroke-width="26" :max="100" :show-text="false" :color="'#fff'"
                    :percentage="currentLesson.progress.progressVal"></el-progress> -->
                <div style="z-index:9999!important" class="d-bg">
                    {{btnContent.title}}
                </div>
            </div>
            <div class="animation s-12" ref="animation">
                <img src="../../../assets/img/home/download-tips.png" alt="">
            </div>
            <span class="t-color-n s-16">{{btnContent.tips}}</span>
        </div>
    </div>
</template>

<script>
import { DownloadCenter } from "../../../../../../static/lib/downloader/DownloadCenter";
import { mapState } from 'vuex'
let pushOneLessonToVX = null
const progressEvent = new BroadcastChannel('progress-message')
import store from '../../../store/index'
import bus from '../../../assets/js/bus.js'
export default {
    inject: ["pushOneLessonToCenter", "changeDownloadStatus", "cancelShadeStatus"],
    props: ["downloadStatus", "lessonId"],
    data () {
        return {
            click: false,
            currentLesson: {
                progress: {
                    progressVal: 100
                }
            },
            btnContent: {
                title: '立即下载',
                tips: '点击按钮下载资源即可使用'
            },
        }
    },
    computed: {
        ...mapState({
            loadingLessonSet: state => state.loadingLessonSet,
        })
    },
    mounted () {
        this.lessonChange(this.lessonId)
    },
    watch: {
        lessonId (val) {
            this.lessonChange(val)
        },
        'loadingLessonSet.length' (val) {
            this.lessonChange(this.lessonId)
        },
        'currentLesson.progress.progressVal' (val) {
            console.log(val)
            this.setProgress(val)
        }
    },
    methods: {
        judgediskSize(){
            let _this = this
            var diskinfo = require('diskinfo'); // 需安装diskinfo依赖
            const currentDisk = process.cwd().substr(0, 2).toUpperCase()
            console.log('currentDisk-------',currentDisk);
            if (localStorage.getItem('available') && localStorage.getItem('available') < 300) {
                this.$message.warning('请及时清理磁盘空间')
                // return
            }
            try {
                diskinfo.getDrives(function (err,aDrives) {
                	for (var i = 0; i < aDrives.length; i++) {
                        if(aDrives[i].mounted.toUpperCase() === currentDisk){
                            if (aDrives[i].blocks) {
                                console.log(aDrives[i]);
                                console.log('磁盘：' + aDrives[i].mounted);
                	            console.log('磁盘总内存：' + aDrives[i].blocks);
                	            console.log('磁盘已用内存：' + aDrives[i].used);
                	            console.log('磁盘可用内存：' + (aDrives[i].available/1024/1024/1024).toFixed('0') + 'gb');
                	            console.log('磁盘已用内存百分比： ' + aDrives[i].capacity);
                                localStorage.setItem('available' , (aDrives[i].available/1024/1024).toFixed('0'));
                                _this.download()
                            }else{
                                _this.download()
                            }
                        }
                	}
                })
            } catch (error) {
                console.log(error);
                return 
            }  
        },
        handledownload(){
            const currentDisk = process.cwd().substr(0, 2).toUpperCase()
            if (!currentDisk) {
                this.download()
                return
            }
            this.judgediskSize()
        },
        resTypeToName(resType) {
            resType = this.$CONST.global.resourceSwitch[resType]
            return this.$CONST.global.resourceType[resType]
        },
        download () {
            // if (!this.click) {
                this.setProgress(0)
                let downloadingIds = DownloadCenter.getInstance().getCurrentDownloadingLesson();
                if (downloadingIds.length + 1 > this.$CONST.global.maxDownloadLesson) {//超出最大限制之后，不允许下载
                    this.$message.warning("同时下载的课程数超过限制，请稍后重试！");
                    return;
                }
                this.pushOneLessonToCenter(true)
                this.currentLesson = this.loadingLessonSet[0]
                console.log(store);
                this.btnContent = {
                    title: '正在下载',
                    tips: '点击右侧工具箱-下载中心按钮查看进度'
                }
                console.log('this.currentLesson----->', this.currentLesson)
                // this.click = true;
            // }
        },
        lessonChange (val) {
            const currentLesson = this.loadingLessonSet.find(item => item.id === val)
            if (currentLesson) {
                this.setProgress(currentLesson.progress.progressVal)
                this.currentLesson.progress = currentLesson.progress
                this.btnContent = {
                    title: '正在下载',
                    tips: '点击右侧教学工具-下载中心查看下载详情'
                }
            } else {
                this.setProgress(100)
                this.btnContent = {
                    title: '立即下载',
                    tips: '点击按钮下载资源即可使用'
                }
            }
            console.log('watch----->', val)
            console.log('watch----->', currentLesson)
            console.log('watch----->', this.loadingLessonSet)
        },
        setProgress (val) {
            const dowloadRef = this.$refs.dowload
            if (dowloadRef) {
                dowloadRef.style.setProperty('--position', `${val}%`)
            }
        }
    }
}
</script>

<style lang="scss">
#download {
    width: 100%;
    // background-image: url(./img/download-bg.png);
    // background-size: cover;
    margin-bottom: 78px;
    --position: 100%;
    .progress-con {
        position: relative;
        width: 224px;
        height: 59px;
        line-height: 59px;
        margin-bottom: 18px;
        background-image: url("./img/d-bg-i.png");
        background-size: cover;
        color: #fff;
        font-size: 22px;
        text-align: center;
        cursor: pointer;
        .d-bg {
            cursor: pointer;
            position: absolute;
            background-image: url("./img/d-bg.png");
            background-repeat: no-repeat;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-size: var(--position) 100%;
            border-radius: 32px;
        }
    }
    .down-btn::-webkit-progress-bar {
        background-color: rgba(#000, 0.4);
    }
    .down-btn::-webkit-progress-value {
        background: #0085ff;
    }
}
</style>
